import React from 'react';

import Header from '../common/Header';
import CKTable from '../components/CKTable';
import CKModal from '../components/CKModal';
import CKPages from '../components/CKPages';

import moment from 'moment';
import {
    Button,
    Input,
    Form,
    Selected
} from 'amazeui-react';


import Fetch from '../common/Fetch';

class PracticeLinkManage extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            page:{
                pageSize:20,
                currentPage:1,
                totalNum:43
            },
            data:null,
            category_data:[],
            currentPage:parseInt(this.props.params.id)||1,
            dataCount:1,
            pageNum:10
        };
    }

    componentDidMount() {
        this.loadLink(1);
        this.loadCategory();
    }
    loadLink(page){
        this.modal.load('正在获取数据中...');
        Fetch('/pract/link_manage/query_link',{
            query:this.getCondition(),
            num:this.state.pageNum,
            page:page
        },(res)=>{
            if(res.status){
                this.setState({
                    data:res.data.data.length>0?res.data.data:null,
                    currentPage:page,
                    dataCount:res.data.count
                });
                this.modal.closeModal();
            }else {
                this.modal.alert('失败','获取友情链接列表出错'+res.msg);
            }
        });
    }
    linkCategory=()=>{

    }
    loadCategory(page){
        Fetch('/pract/link_manage/query_category',{
            query:{},
            num:100,
            page:1
        },(res)=>{
            if(res.status){
                let data=[];
                $.map(res.data.data,(item)=>{
                    data.push({label:item.ctg_name,value:item.ctg_id})
                });
                this.setState({
                    category_data:data
                })
            }else {
                this.modal.alert('失败','获取友情链接分类列表出错！'+res.msg);
            }
        })
    }
    addLink=()=>{
        this.context.router.push('/par_link_manage_edit')

    }
    editLink=(row)=>{
        this.context.router.push('/par_link_manage_edit'+row.cipher_id);
    }
    delLink=(row)=>{
        this.modal.confirm('删除友情链接','确定要删除该链接吗？',()=>{
            Fetch('/pract/link_manage/delete_link',{cipher_id:row.cipher_id},(res)=>{
                if(res.status){
                    this.modal.alert('成功','删除成功！')
                    this.loadLink(1);
                }else {
                    this.modal.alert('失败','删除失败')
                }
            });
            console.log(row.cipher_id)
        })

    }
    getSelect=()=>{
        this.loadLink(1);
    }
    getCondition(){
        let query={
            ctg_name:{
                type:'like',
                name:'link_name',
                value:this.refs.link_name.getValue()+'%'
            },
           ctg_id:{
                name:'ctg_id',
                value:this.refs.category.getValue()
            },
        }
        return query;
    }
    render() {
        return (
            <div className="content">
                <Header title="友情链接管理"/>
                <div className="content_main">
                    <p>
                        <h4 className="title">查询条件</h4>
                    </p>
                    <p>
                        <Form inline>
                            <Input ref='link_name' placeholder="链接名称" />
                            {'\u00a0'}
                            <Selected ref="category"
                                placeholder="请选择分类"
                                data={this.state.category_data}
                            />
                            {'\u00a0'}
                            <Button amStyle="secondary" onClick={this.getSelect}>搜索</Button>
                        </Form>
                    </p>
                    <p>
                        <Button amStyle="success" onClick={this.addLink}>新增链接</Button>
                        <Button amStyle="primary" onClick={this.linkCategory} style={{float:'right'}}>分类管理</Button>
                    </p>
                    <p>
                        <h4 className="title">列表</h4>
                    </p>
                    <p>
                        {this.state.data?this.renderTable():this.renderNotData()}
                    </p>
                </div>
                
                <CKModal ref={(c)=> {
                    this.modal = c
                }}/>
            </div>
        )
    }

    renderTable() {
        return (
            <div>
                <CKTable ref="table" data={this.state.data} select={false}
                         onRefresh={()=>this.loadLink(1)}>
                    <CKTable.Header text="ID" field="link_id"/>
                    <CKTable.Header text="链接名称" field="link_name"/>
                    <CKTable.Header text="分类名称" field="ctg_name"/>
                    <CKTable.Header text="外链地址" field="link_addr"/>
                    <CKTable.Header text="链接类型" field="link_type"/>
                    <CKTable.Header text="图片地址" field="link_img"/>
                    <CKTable.Header text="图片高度" field="link_img_width"/>
                    <CKTable.Header text="图片宽度" field="link_img_height"/>
                    <CKTable.Header text="创建时间" field="created_date" onFormat={(val)=> {
                        return moment.unix(val).format('YYYY-MM-DD HH:mm:ss')
                    }}/>
                    <CKTable.Header text="操作">
                        <Button onClick={this.editLink} amSize="xs" amStyle="warning">编辑</Button>
                        {'\u00a0\u00a0'}
                        <Button onClick={this.delLink} amSize="xs" amStyle="danger">删除</Button>
                    </CKTable.Header>
                </CKTable>
                <CKPages current={this.state.currentPage}
                         number={this.state.pageNum}
                         count={this.state.dataCount}
                         onSelect={(page)=> {
                             this.loadLink(page)
                         }}/>
            </div>
        );
    }

    renderNotData() {
        return (
            <div style={{textAlign: 'center', fontSize: '24px', paddingTop: '200px'}}>
                没有数据
            </div>
        );
    }
}
PracticeLinkManage.contextTypes = {
    router: React.PropTypes.object
};

export default PracticeLinkManage;
